<template>
  <div class="address">
    <div class="header">
      <van-nav-bar
        title="收货地址"
        left-text="返回"
        right-text=""
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <section class="choose">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </section>
    <section class="add">
      <van-action-sheet v-model="show" title="添加地址">
        <div class="content">
          <van-address-edit
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            :address-info="AddressInfo"
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
          />
        </div>
      </van-action-sheet>
    </section>
  </div>
</template>
<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import { addressuser } from "@/http/api";
export default {
  data() {
    return {
      chosenAddressId: 0,
      list: [
        // {
        //   id: 0,
        //   name: "张三",
        //   tel: "13000000000",
        //   address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        //   isDefault: true,
        // },
        // {
        //   id: 1,
        //   name: "李四",
        //   tel: "1310000000",
        //   address: "浙江省杭州市拱墅区莫干山路 50 号",
        // },
      ],
      show: false,
      areaList,
      editlist: "",
      AddressInfo: {
        id: 0, //收货人信息初始值
        name: "", //姓名
        tel: "", //电话
        province: "", //省份
        city: "", //城市
        country: "", //区县
        // areaCode: "", //地址code：ID
        addressDetail: "", //详细地址
        isDefault: "", //是否选择默认
      },
    };
  },
  methods: {
    onAdd() {
      Toast("新增地址");
      this.show = true;
    },
    onEdit(item, index) {
      Toast("编辑地址:" + index);
      console.log(item);
    },
    onClickLeft() {
      this.$router.push({ path: "/my" });
    },
    onClickRight() {
      Toast("按钮");
    },
    onSave(content) {
      // Toast('save');
      console.log(content);
      //  let list = this.list
      let id = 0;
      let obj = {};
      if (this.list.length > 0) {
        id = this.list.length;
      }
      
      obj.name = content.name;
      obj.tel = content.tel;
      obj.address = content.city + content.county + content.addressDetail;
      if (content.isDefault) {
        obj.isDefault = true;
        
        obj.id = 0;
        this.list.forEach((item) => {
          if (item.isDefault) {
           delete item.isDefault;
          }
          item.id= Number(item.id)+1;
        });
        this.list.unshift(obj)
      } else {
        obj.id = id;
        this.list.push(obj);
      }
      // console.log(obj);
      
      console.log(this.list);
      this.show = false;
      this.AddressInfo = {
        id: 0, //收货人信息初始值
        name: "", //姓名
        tel: "", //电话
        province: "", //省份
        city: "", //城市
        country: "", //区县
        // areaCode: "", //地址code：ID
        addressDetail: "", //详细地址
        isDefault: "", //是否选择默认
      };
      //保存地址到本地
      localStorage.setItem("address", JSON.stringify(this.list));
      //添加到用户数据
      this.Addressuser();
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {},
    //初始化地址列表
    initaddress() {
      let that = this;
      let list = JSON.parse(localStorage.getItem("address"));

      if (list) {
        list.forEach((item) => {
          if (item.isDefault) {
            that.chosenAddressId = item.id;
            
          }
        });
        that.list = list;
      }
      console.log(this.list);
    },
    //添加收货地址到用户数据
    Addressuser() {
      let token = localStorage.getItem("token");
      let address = JSON.parse(localStorage.getItem("address"));
      addressuser("/user/address", { token, address }).then((data) => {
        if (data.code == 200) {
          console.log(data.msg);
        } else {
          console.log(data.msg);
        }
      });
    },
  },
  created() {
    this.initaddress();
  },
};
</script>
<style lang="scss" scoped>
</style>